<template>
	<div>
		<el-form ref="questionFormRef" :model="questionForm" :label-width="labelWidth">
			<el-form-item
				label="题型"
				prop="questionType"
				:rules="{
					required: true,
					message: '请选择题型',
					trigger: 'change'
				}"
			>
				<el-select :disabled="type==='edit'" v-model="questionForm.questionType" placeholder="请选择">
					<el-option
						v-for="(item,key) in questionTypes"
						:key="key"
						:label="item"
						:value="key"
					/>
				</el-select>
			</el-form-item>
			<template v-if="questionForm.questionType">
				<!-- 题型编辑组件 -->
				<component
					:is="qComponent"
					v-if="qComponent"
					ref="questionRef"
					:value="questionInfo"
					:question-type="questionInfo.questionType"
					:parent-type="parentType"
					:basic-info="basicInfo"
					:tag-info="tagInfo"
					@edit="handleEdit"
					@change="questionChange"
				/>
			</template>

			<!-- 组合题型不含解析 -->
			<template v-if="questionForm.questionType && !combinedType.includes(questionForm.questionType)">
				<el-form-item
					label="解析"
					prop="questionAnswerParse"
					:rules="{
						required: true,
						message: '请填写试题解析',
						trigger: ['blur', 'change']
					}"
				>
					<el-input class="item-answer" v-model.trim="questionForm.questionAnswerParse" maxlength="2000">
						<i
							slot="suffix"
							@click="handleEdit(questionForm.questionAnswerParse,'questionAnswerParse')"
							class="el-icon-edit-outline icons"
						/>
					</el-input>
				</el-form-item>
				<!-- 视频解析 -->
				<el-form-item class="item-list" label="视频解析" v-if="questionForm.questionVideoPathList">
					<div class="video-list">
						<draggable class="video" :list="questionForm.questionVideoPathList" @end="videoSortEnd">
							<el-form-item v-for="(item) in questionForm.questionVideoPathList" :key="item.key">
								<div class="item-video flex ai-center">
									<el-input
										placeholder="请输入保利威视频VID"
										class="item-answer"
										v-model.trim="item.questionAvPath"
										clearable
									/>
									<i class="el-icon-rank" />
								</div>
							</el-form-item>
						</draggable>
						<div class="sort-btns">
							<div v-for="(item, index) in questionForm.questionVideoPathList" :key="item.key">
								<div class="add-btn" v-if="index===0" @click="addVideoList">
									<img class="title-icon" src="@rc/assets/images/icon-add.png" alt="">
									<el-button class="sort-add" type="text">添加vid</el-button>
								</div>
								<div class="add-btn" v-if="index!==0">
									<i class="el-icon-error" @click="deleteVideoList(index)" />
								</div>
							</div>
						</div>
					</div>
				</el-form-item>
				<!-- 音频解析 -->
				<el-form-item class="item-list" label="音频解析" v-if="questionForm.questionAudioPathList">
					<div class="audio-list">
						<draggable class="audio" :list="questionForm.questionAudioPathList" @end="audioSortEnd">
							<el-form-item v-for="(item) in questionForm.questionAudioPathList" :key="item.key">
								<div class="item-audio flex ai-center">
									<el-input
										placeholder="请输入音频解析链接地址或者上传音频源文件"
										class="item-answer"
										v-model.trim="item.questionAvPath"
										clearable
									/>
									<i class="el-icon-rank" />
								</div>
							</el-form-item>
						</draggable>
						<div class="sort-btns">
							<div v-for="(item, index) in questionForm.questionAudioPathList" :key="item.key">
								<div class="add-btn audio-upload">
									<upload-audio
										@on-success="(file)=>vidUploadSuccess(file,index)"
										@on-progress="vidProgress"
										:ref="'uploadAudioRef'+index"
										:disabled="disabledUploadAudio"
									>
										<img
											class="title-icon"
											src="@rc/assets/images/icon-add.png"
											alt=""
										>
										<el-button type="text" @click="onClickUploadAudio">上传音频</el-button>
									</upload-audio>
								</div>
								<div class="add-btn" v-show="index!==0">
									<i class="el-icon-error" @click="deleteAudioList(index)" />
								</div>
								<div class="add-btn" v-show="index===0">
									<div class="add-btn-item" @click="addAudioList('')">
										<img class="title-icon" src="@rc/assets/images/icon-add.png" alt="">
										<el-button class="sort-add" type="text">添加地址</el-button>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 进度条 -->
					<div class="process" v-if="tempFile.percent">
						<div class="el-upload-list__item-name">
							<i class="el-icon-document" />
							<span>{{ tempFile.name }}</span>
							<span>{{ tempFile.percent?tempFile.percent+'%':'' }}</span>
						</div>
						<el-progress :show-text="false" :percentage="tempFile.percent" />
					</div>
				</el-form-item>
			</template>
		</el-form>
		<!-- 富文本 -->
		<editor-dialog
			ref="editorRef"
			v-if="isShowEdit"
			:visibly.sync="isShowEdit"
			:value="editInfo.editValue"
			@submit="onEditorSuccess"
		/>
	</div>
</template>
<script src="./index.mjs"/>
<style lang="less" scoped>
	/deep/ .item-answer {
		.el-icon-edit-outline.icons {
			font-size: 18px;
			cursor: pointer;
		}
		.el-input__suffix {
			top: 3px;
		}
	}
	/deep/.audio-list,
	.video-list {
        width: 100%;
        display: flex;
        align-items: flex-start;
        .video,.audio{
            flex:1;
            max-width: calc(100% - 200px);
        }
        .sort-btns {
			width: 200px;
			display: flex;
			justify-content: center;
            flex-direction: column;
		}
        .add-btn{
            flex: 1;
            display: inline-flex;
            flex-shrink: 0;
            align-items: center;
            justify-items: center;
            height: 32px;
            margin-bottom: 20px;
            cursor: pointer;
            .add-btn-item{
               flex: 1;
               display: inline-flex;
               flex-shrink: 0;
               align-items: center;
            }
            &.audio-upload{
                margin-right: 10px;
            }
        }
        .title-icon {
            width: 13px;
            height: 14px;
            margin-right: 8px;
		}
		.el-icon-rank {
			margin-left: 10px;
		}
		.el-icon-error,
		.el-icon-rank {
			font-size: 20px;
			margin-right: 10px;
			cursor: pointer;
		}
		.sort-add {
			flex-shrink: 0;
			width: 50px;
		}
	}

	.process {
		min-width: 100px;
		max-width: 50%;
		margin-bottom: 10px;
		/deep/ .el-progress-bar__outer {
			height: 2px !important;
		}
	}
	.sort-btns{
        /deep/ .el-upload-list {
		    display: none;
	    }
    }
    /deep/ .item-list.el-form-item{
        margin-bottom: 0;
    }
</style>
